<div class="container">
    <div class="block-header">
        <h2>首页</h2>

    </div>


    <div class="mini-charts">
        <div class="row">
            <div class="col-sm-6 col-md-3">
                <div class="mini-charts-item bgm-cyan">
                    <div class="clearfix">
                        <div class="chart stats-bar" data-sparkline-bar></div>
                        <div class="count">
                            <small>主机总数</small>
                            <h2>3</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3">
                <div class="mini-charts-item bgm-lightgreen">
                    <div class="clearfix">
                        <div class="chart stats-bar-2" data-sparkline-bar></div>
                        <div class="count">
                            <small>硬盘总数</small>
                            <h2>18</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3">
                <div class="mini-charts-item bgm-bluegray">
                    <div class="clearfix">
                        <div class="chart stats-line-2" data-sparkline-line></div>
                        <div class="count">
                            <small>容器总数</small>
                            <h2>4</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3">
                <div class="mini-charts-item bgm-orange">
                    <div class="clearfix">
                        <div class="chart stats-line" data-sparkline-line></div>
                        <div class="count">
                            <small>虚拟存储</small>
                            <h2>22</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="dash-widgets">
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div id="site-visits" class="dash-widget-item bgm-teal">
                    <div class="dash-widget-header">
                        <div class="p-20">
                            <div class="dash-widget-visits" data-sparkline-line></div>
                        </div>

                        <div class="dash-widget-title">过去30天状态</div>

                    </div>

                    <div class="p-20">

                        <small>CPU使用</small>
                        <h3 class="m-0 f-400">47,896,536 GHz</h3>

                        <br/>

                        <small>内存使用</small>
                        <h3 class="m-0 f-400">24,456,799 G</h3>

                        <br/>

                        <small>网络流量</small>
                        <h3 class="m-0 f-400">11,233,965 M</h3>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6">
                <div id="pie-charts" class="dash-widget-item">
                    <div class="bgm-pink">
                        <!-- <div class="dash-widget-header">
                            <div class="dash-widget-title">CPU使用率</div>
                        </div> -->

                        <div class="clearfix"></div>

                        <div class="text-center p-20 m-t-25">
                            <div class="easy-pie main-pie" data-percent="35" data-easypie-chart>
                                <div class="percent">35</div>
                                <div class="pie-title">CPU使用率</div>
                            </div>
                        </div>
                    </div>

                    <div class="p-t-20 p-b-20 text-center">
                        <div class="easy-pie sub-pie-1" data-percent="56" data-easypie-chart>
                            <div class="percent">56</div>
                            <div class="pie-title">内存使用率</div>
                        </div>
                        <div class="easy-pie sub-pie-2" data-percent="44" data-easypie-chart>
                            <div class="percent">44</div>
                            <div class="pie-title">硬盘使用率</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6">
                <div class="dash-widget-item bgm-white">
                    <div id="weather-widget" data-weather-widget>
                        <div class="dash-wrapper">
                            <div class="flot-chart" data-dynamic-chart></div>
                            <div class="flc-dynamic"></div>
                        </div>
                        <div class="dash-wrapper">
                            <div class="flot-chart" data-dynamic-chart></div>
                            <div class="flc-dynamic"></div>
                        </div>
                        <div class="dash-wrapper">
                            <div class="flot-chart" data-dynamic-chart></div>
                            <div class="flc-dynamic"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6">
                <div id="best-selling" class="dash-widget-item" data-ng-controller="dashboardCtrl as dhctrl">
                    <div class="dash-widget-header">
                        <div class="dash-widget-title">服务器状态</div>
                        <img src="img/widgets/nutanix1.jpg" alt="">
                        <div class="main-item">
                            <h2>正常运行，未出现异常</h2>
                        </div>
                    </div>

                    <div class="listview p-t-5">
                        <a class="lv-item" href="" data-ng-repeat="w in dhctrl.notes">
                            <div class="media">
                                <div class="media-body">
                                    <div class="lv-title">{{ w.name }}：{{w.num}}</div>
                                    <small class="lv-small">正常：{{ w.useful }}  异常：{{w.useless}}</small>
                                </div>
                            </div>
                        </a>

                        <div class="clearfix"></div>

                        <a class="lv-footer" href="">
                            查看全部
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>